<ng-container *transloco="let t; read:'generic-list-modal'">
  <div class="modal-header">
    <h4 class="modal-title" id="modal-basic-title">{{title}}</h4>
    <button type="button" class="btn-close" [attr.aria-label]="t('close')" (click)="close()"></button>
  </div>
  <div class="modal-body">
    <form style="width: 100%" [formGroup]="listForm">
      <div class="mb-3" *ngIf="items.length >= 5">
        <label for="filter" class="form-label">{{t('filter')}}</label>
        <div class="input-group">
          <input id="filter" autocomplete="off" class="form-control" formControlName="filterQuery" type="text" aria-describedby="reset-input">
          <button class="btn btn-outline-secondary" type="button" id="reset-input" (click)="listForm.get('filterQuery')?.setValue('');">{{t('clear')}}</button>
        </div>
      </div>
      <div class="list-group">
        <li class="list-group-item d-flex justify-content-between align-items-center" *ngFor="let item of items | filter: filterList; let i = index">
          {{item}}
          <button class="btn btn-primary" *ngIf="clicked !== undefined" (click)="handleClick(item)">
            <i class="fa-solid fa-arrow-up-right-from-square" aria-hidden="true"></i>
            <span class="visually-hidden">{{t('open-filtered-search',{item: item})}}</span>
          </button>
        </li>
      </div>
    </form>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-primary" (click)="close()">{{t('close')}}</button>
  </div>

</ng-container>
